import  React from 'react'
import  './listitem.less'
import Pubsub from 'pubsub-js'

class ListItem extends React.Component{
    playMusic(musicItem){
    Pubsub.publish('PLAY_MUSIC',musicItem)


    }
    deleteMusic(musicItem, e){
        e.stopPropagation();
        Pubsub.publish('DELETE_MUSIC', musicItem)

    }
    render(){

        let musicItem = this.props.musicItem;
        return(
            <li onClick={this.playMusic.bind(this, musicItem)} className={`components-listItem row ${this.props.focus ? 'focus' : ''}`}>
                 <p><strong>{musicItem.title} - {musicItem.artist}</strong></p>
                     <p onClick={this.deleteMusic.bind(this, musicItem)} className="-col-auto delete"></p>
            </li>

        )



    }



}

export default ListItem;